<template>
    <div class="p-content">
        <div class="money-detail">
            <form id="frm">
                <input type="hidden" name="p2" id="p2" data-val-required="请上传身份证背面图片">
                <ul>
                    <li>
                        <span class="name">真实姓名：</span>
                        <span class="con">
                            <input type="text" class="l-text" name="name" id="name" placeholder="请填写您的姓名" data-val-required="请填写您的姓名" data-val-func="validateEmoji" data-val-func-require="您的姓名中包含emoji表情">
                        </span>
                    </li>
                    <li>
                        <span class="name">身份证号：</span>
                        <span class="con">
                            <input type="text" class="l-text" name="id_card" id="id_card" placeholder="请填写您的身份证号" data-val-func="validateIdCard" data-val-length="身份证号最多允许输入18个字" data-val-length-max="18" data-val-regex-require="请输入正确的身份证号" data-val-regex-pattern="^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$" data-val-remote="身份证号错误或已经存在" data-val-required="请输入身份证号">
                        </span>
                    </li>
                    <li>
                        <span class="name">密码：</span>
                        <span class="con">
                            <input type="password" class="l-text" name="pwd" id="pwd" data-val-min="6" data-val-min-required="请填写6位密码" data-val-max="6" data-val-max-required="请填写6位密码" data-val-required="请输入6位密码">
                            <!-- <i class="eye-icon open-eye close-eye"></i> -->
                        </span>
                    </li>
                    <li>
                        <span class="name">确认密码：</span>
                        <span class="con">
                            <input type="password" class="l-text" name="confirm_pwd" id="confirm_pwd">
                            <!-- <i class="eye-icon open-eye "></i> -->
                            <!-- close-eye -->
                        </span>
                    </li>
                    <li>
                        <span class="name">推荐人：</span>
                        <span class="con">
                            <input type="text" class="m-text" name="referrer" id="referrer" placeholder="请填写推荐人的姓名" data-val-required="请填写推荐人的姓名" data-val-func="validateEmoji" data-val-func-require="推荐人的姓名中包含emoji表情">
                            <span class="text-tips">如果没有可不填</span>
                        </span>
                    </li>
                    <li>
                        <span class="name">身份证照片：</span>
                        <div class="con id-card">
                            <!-- <div class="card-item">
                                <p class="img-p">
                                    <canvas id="canvas1" style="display: none"></canvas>
                                    <img :src="picbg" alt="" id="img_p1">
                                    <input type="file" name="file_p1" id="file_p1" class="upload" data-id="1" />
                                </p>
                                <p class="text">（正面）</p>
                            </div> -->
                            <FormUploadImg title="正面" identity="1" name="p1" warning="请上传身份证正面图片" @getAddress="getAddress"></FormUploadImg>
                            <FormUploadImg title="背面" identity="2" name="p2" warning="请上传身份证背面图片" @getAddress="getAddress"></FormUploadImg>
                        </div>

                    </li>
                    <li>
                        <span class="name"></span>
                        <div class="con">
                            <p class="tips">注意：请上传600KB以内的身份证照片</p>
                        </div>
                    </li>
                    <li>

                    </li>
                    <li>
                        <span class="name">手机号：</span>
                        <span class="con">
                            <input type="tel" class="l-text" name="tel" id="tel" placeholder="请填写您的手机号" data-val-regex-require="请输入正确的手机号码" data-val-regex-pattern="^\+?(86)?[1][34578]\d{9}$" data-val-required="请输入手机号" data-val-func="validateEmoji" data-val-func-require="手机号中包含emoji表情">
                        </span>
                    </li>
                    <li>
                        <span class="name">验证码：</span>
                        <span class="con">
                            <input type="text" class="m-text" name="code" id="code" placeholder="请填写您收到的验证码" data-val-required="请填写您的验证码" data-val-func="validateEmoji" data-val-func-require="您的验证码中包含emoji表情">
                            <span class="code-btn got-code" id="btn_get_code">获取验证码</span>
                        </span>
                    </li>
                </ul>
            </form>
            <div class="agreement-operate">
                <div>
                    <label for="">
                        <input type="checkbox" id="agree_about">
                        <label for="agree_about">我同意并已阅读</label>
                        <a href="page2.html">《风险揭示书》</a>
                    </label>
                </div>
                <!-- <div>
                    <label for="">
                        <input type="checkbox"> 我同意并已阅读
                        <a href="#">《开户协议》</a>
                    </label>
                </div> -->

            </div>
        </div>
    </div>
</template>

<script>
import FormUploadImg from '@/components/FormUploadImg'
import Preloader from '@/components/Preloader'

export default {
  name: `ImportControls`,
  components: {
    FormUploadImg,
    Preloader
  },
  data () {
    return {
      picbg: `./static/img/picbg.png`
    }
  },
  methods: {
    getAddress (id) {
      //   alert(id)
    },
    showPreloader (txt) {
      let defaultTxt = '加载中'

      txt = txt || defaultTxt

      let $modal = document.querySelector('.modal')
      let $modalOverlay = document.querySelector('.modal-overlay')

      $modal.querySelector('.modal-title').html(txt)

      $modal.className += ' modal-in'
      $modalOverlay.className += ' modal-overlay-visible'

    //   $modal.fadeIn(300).addClass('modal-in')
    //   $modalOverlay.fadeIn(300).addClass('modal-overlay-visible')
    },
    hidePreloader () {
      let $modal = document.querySelector('.modal')
      let $modalOverlay = document.querySelector('.modal-overlay')

      $modal.className.replace(/modal-in/, '')
      $modalOverlay.addEventListener('webkitAnimationEnd', function () {
        this.style.display = 'none'

        this.removeEventListener('webkitAnimationEnd')
      })
      $modalOverlay.className.replace(/modal-overlay-visible/, '')

    //   $modal.removeClass('modal-in').fadeOut(300)
    //   $modalOverlay.one('webkitAnimationEnd', function () {
    //     $(this).hide()
    //   }).removeClass('modal-overlay-visible').fadeOut(300)
    }
  }
}
</script>

<style>
</style>
